<template>
  <div>
    <el-card class="box-card">
      <div class="text item">
        <el-row :gutter="24">
          <el-col :span="6">
            <div class="grid-content bg-purple row-thr">
              <span>店铺订单号：{{delivery.order_shop_no}}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple row-thr">
              <span>发货单号：{{delivery.no}}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple row-thr">
              <span>店铺名称：{{delivery.shop_name}}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple row-thr">
              <span>物流公司：{{delivery.corp_name}}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <span @click="handleExpress()" >运单号：<span class="link-style">{{delivery.express_no}}</span></span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple row-thr">
              <span>收货人姓名：{{delivery.receiver_name}}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple row-thr">
              <span>收货人手机：{{delivery.receiver_phone}}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple row-thr">
              <span>收货地址：{{delivery.receiver_address}}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6">
            <div class="grid-content bg-purple row-thr">
              <span>单据创建时间：{{delivery.created_at}}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple row-thr">
              <span>配送类型：{{delivery.shipping_type}}</span>
            </div>
          </el-col>
        </el-row>

      </div>
    </el-card>
    <el-card class="box-card">
      <div class="text item">
        <table style="border-collapse: collapse;width:80%" class="table-container">
          <tr>
            <td>商品订单号：</td>
            <td>商品名称：</td>
            <td>商品货号：</td>
            <td>发货量：</td>
          </tr>
          <tr v-for="(item,index) in details" :key="index">
            <td>{{item.order_good_no}}</td>
            <td><a href="javascript:;">{{item.title}}</a></td>
            <td>{{item.art_no}}</td>
            <td>{{item.num}}</td>
          </tr>
        </table>
      </div>
    </el-card>
    <el-dialog
      title="查看物流"
      :visible.sync="dialogVisible"
      width="50%"
      center>
      <div class="delivery-head">
        <p>物流公司：{{delivery.corp_name}}</p>
        <p>物流单号：{{delivery.express_no}}</p>
      </div>
      <div v-if="deliveryTraceArr.length">
        <ul v-for='(trace_list,index) in deliveryTraceArr'>
          <li v-if="index === 0" style="color:blue">
            <span style="margin-right:50px">最近物流更新：{{trace_list.time}}</span>
            <p>
              {{trace_list.context}}
            </p>
          </li>

          <li v-else><span style="margin-right:50px">{{trace_list.time}}</span>{{trace_list.context}}</li>
        </ul>
      </div>
      <div v-else>
        <p class="no-data">暂无物流信息，请稍后再试...</p>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import { getDeliveryTrace } from '@/api/trade/consignment'
  export default {
    props: {
      detailInfo: {
        type: Object,
        default: ''
      }
    },
    name: "consignmentd",
    data() {
      return {
        delivery: this.detailInfo.delivery,
        details: this.detailInfo.details,
        activeName: 'first',
        dialogVisible:false,
        deliveryTraceArr:""
      }
    },
    methods:{
      handleExpress(){
        this.dialogVisible = true;
      },
      getDeliveryTrace(){
        const delivery = this.delivery;
        let params = {
          code:delivery.corp_code,
          phone:delivery.receiver_phone,
          express_no:delivery.express_no,
        };
        getDeliveryTrace(params).then((res) => {
          if(res.code == 0){
            this.deliveryTraceArr = res.data;
          }
        })
      }
    },
    created(){
      this.getDeliveryTrace();
    }

  }
</script>

<style lang="scss">
  .box-card {
    margin-top: 20px;
  }

  .table-container {
    border: 1px solid #eee;
    tr {
      width: 80%
    }
    td {
      text-align: center;
      min-width: 20%
    }
  }

  .row-thr {
    margin-bottom: 30px
  }
  .delivery-head {
    padding: 5px 28px;
    border-bottom: 1px solid #e6e6e6;
    p{
      color: #333;
      font-pageSize: 15px;
    }
  }
  .no-data{
    text-align: center;
    padding: 20px;
  }
  .link-style{
    color:#409EFF;
    text-decoration: underline
  }
</style>
